<!--
 * @Descripttion: 
 * @LastEditors: xzh
 * @LastEditTime: 2023-11-08 20:27:15
-->
<template>
  <div class="statistic-status" v-loading="loading">
    <!-- 保养任务状态 -->
    <div v-for="(status, index) in dataArr" :key="index">
      <div class="status-icon" :style="{ backgroundColor: status.background }">
        <SvgIcon :size="3" color="white" :name="status.icon" />
      </div>
      <div class="status-content">
        <DileTooltip :content="$t(status.label)" />
        <span class="status-value">
          <template v-if="!!status.value">
            <CountTo :endVal="status.value?.split('/')[0] || 0" />
            <span>/</span>
            <CountTo :endVal="status.value?.split('/')[1] || 0" />
          </template>
          <span v-else>0</span>
        </span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
import { object_Inf } from "@/utils/typings/index.type";
import { CountTo } from "vue3-count-to";
import DileTooltip from "@/components/dile-tooltip/index.vue";
import SvgIcon from "@/assets/icons/index.vue";

defineProps({
  dataArr: {
    type: Array<object_Inf>,
    requited: true,
    default: [],
  },
  loading: {
    type: Boolean,
    requited: true,
    default: false,
  },
});
</script>
<style lang="scss" scoped>
.statistic-status {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-wrap: wrap;
  height: 100%;
  overflow: auto;
  gap: 2rem;
  > div {
    display: flex;
    align-items: center;
    height: 50%;
    margin: 0 2rem;
    gap: 2rem;
    .status-icon {
      height: 5rem;
      width: 5rem;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
    }

    .status-content {
      height: 5rem;
      max-width: 10rem;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .status-value {
        font-weight: 700;
        font-style: normal;
        font-size: 20px;
        color: rgb(80, 106, 188);
      }
    }
  }
}
</style>
